<template lang="pug">
  .table-wrapper
    el-table.table-xxs(
      border
      ref="table"
      :data="tableData"
      :default-sort="{prop: 'recordTime', order: 'descending'}"
      height="100%")
      el-table-column(
        v-for="(item, index) of header"
        :key="index"
        :prop="item.mark"
        :sortable="item.sort"
        :formatter="item.formatter"
        :filters="item.relation"
        :label="`${item.label} ${item.unit ? item.unit : ''}`"
        :width="item.width"
        :min-width="item.minWidth"
        :highlight-current-row="true")
      template(slot="append")
        slot(name="append")
</template>

<script>
/**
 * @name HistoryTable 历史数据图表
 * @author caixq
 * @description 各种指标历史数据的展示图标
 */
export default {
  name: 'HistoryTable',
  props: {
    // 初始表格数据
    tableData: {
      type: Array,
      default: () => ([])
    },
    // 表头信息
    header: {
      type: Array,
      default: () => ([])
    }
  },
  methods: {
    // 使当前行高亮
    setCurrentRow (row) {
      // console.log('row:', row)
    },
    highLightTable (data) {
      // wangrf 图表触发表格行高亮 待完成
      // this.$refs.table.setCurrentRow(6)
      console.log('来自图表的数据', data)
    }
  }
}
</script>

<style lang="sass" scoped>
.table-wrapper
  height: 100%
  width: 100%
  display: flex
  /deep/.el-table
    th, td
      // padding: 0px
      height: 36px
      line-height: 36px
      // padding: 0px 9px
      padding: 0
      text-align: center
      color: #555555
      font-size: 12px
    th
      background: #e8ecef
      font-size: 12px
    tr
      &:nth-child(2n)
        background-color: #f7f8fa
      &:hover
        background-color: #eaeff3
</style>
